<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload=function(){
			p_item=document.getElementsByClassName("p_item");
			for(var i=0;i<p_item.length;i++){
				p_item[i].onmouseover=function(){
					this.getElementsByClassName('child')[0].style.display="block";
				}
			}
			for(var i=0;i<p_item.length;i++){
				p_item[i].onmouseout=function(){
					this.getElementsByClassName('child')[0].style.display="none";
				}
			}
		}

	</script>
	<style type="text/css">
		*{
			list-style: none;
			margin: 0;
			padding: 0;
		}
		.parent{
			width: 400px;
			height: 40px;
			margin: 0 auto;
			margin-top: 100px;
		}
		.p_item{
			width: 100px;
			height: 40px;
			background-color: green;
			position: relative;
			float: left;
			text-align: center;
			line-height: 40px;
		}
		.p_item:hover{
			background-color: white;
		}
		.child{
			background-color: gray;
			display: none;
		}
		.c_item:hover{
			background-color: white;
		}
	</style>
</head>
<body>
	<ul class="parent">
		<li class="p_item">头条
			<ul class="child">
				<li class="c_item">社会聚焦</li>
				<li class="c_item">百家讲坛</li>
				<li class="c_item">明星花边</li>
				<li class="c_item">网上热点</li>
			</ul>
		</li>
		<li class="p_item">国际新闻
			<ul class="child">
				<li class="c_item">热点</li>
				<li class="c_item">朝核</li>
				<li class="c_item">南海</li>
				<li class="c_item">中东</li>
				<li class="c_item">特朗普</li>
			</ul>
		</li>
		<li class="p_item">国内新闻
			<ul class="child">
				<li class="c_item">十九大</li>
				<li class="c_item">新时代</li>
				<li class="c_item">新梦想</li>
				<li class="c_item">一带一路</li>
			</ul>
		</li>
		<li class="p_item">金融财经
			<ul class="child">
				<li class="c_item">房价</li>
				<li class="c_item">证券</li>
				<li class="c_item">股市</li>
			</ul>
		</li>
	</ul>
</body>
</html>